<template>
	<view class="container">
		<u-swiper :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
		<view class="main">
			<view class="title_b">
				门店介绍
				<view class="bottom_border"></view>
			</view>
			<view class="content">
				北京柚子企业管理有限公司，创立于2004 年，是一家集美发、美容美体、护肤、彩妆、造型为一体的连锁机构公司。公司旗下现有知名品牌：柚子造型、柚子护肤造型、柚子护肤美发。
			</view>
			<image v-for="(item,index) in homeImgList" :key="index" :src="item" mode=""></image>
			<view class="title">
				门店位置
			</view>
			<image @click="openAddress()" style="width:100%;height:40vh;display: block;"
				:src="`https://apis.map.qq.com/ws/staticmap/v2/?center=${latitude},${longitude}&zoom=16&size=400*300&maptype=roadmap&markers=size:large|${latitude},${longitude}&key=RAIBZ-Z6KE4-FACUM-D2U5Z-QAOA7-SPFUF`"
				mode=""></image>
			<!-- <map style="width:100%;height:40vh;"
			:latitude="latitude" 
			:markers="marker" 
			:enable-zoom="false"
			:enable-scroll="false"
			:longitude="longitude"
			class="wrap_center_card_map"
			>
			<cover-view style="width: 100%;height: 100%;" @click="openAddress()"></cover-view>
			</map> -->
		</view>
		<footer-tab-bar></footer-tab-bar>
	</view>
</template>

<script>
	import {
		$tabBarCctive
	} from 'vuex'
	export default {
		data() {
			return {
				// latitude: 40.013305, //纬度
				// longitude: 118.685713, //经度
				latitude: 25.616402, //纬度
				longitude: 111.949923, //经度
				name:'第六感美发沙龙',
				address:'永州市宁远县文庙街道舂林路590号',
				marker: [{
					id: 0,
					// latitude: 40.013305, //纬度
					// longitude: 118.685713, //经度
					latitude: 25.616402, //纬度
					longitude: 111.949923, //经度
					iconPath: '', //显示的图标        
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 25, //高
				}],

				value1: 1,
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/album/1.jpg',
				],
				homeImgList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				]
			}
		},
		onLoad(option) {
			console.log($tabBarCctive)
		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: { 
			openAddress(){
				wx.openLocation({
				  	latitude: this.latitude, // 纬度，范围为-90~90，负数表示南纬
				  	longitude: this.longitude, // 经度，范围为-180~180，负数表示西经,
				  	name:this.name,				// 地址名称：某某学校 
				  	address:this.address,		// 详细地址：某某街，某某路
				  	success:function(r){
						console.log(r)
				  	}
				})
			}
		},
	}
</script>

<style scoped="scss">
	.main {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(-10rpx);
		padding: 30rpx 20rpx;
	}

	.title_b {
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
	}

	.bottom_border {
		border-bottom: 8rpx solid #FD4080;
		width: 40rpx;
		margin: 10rpx auto;
	}

	.content {
		padding: 30rpx;
		font-size: 30rpx;
		color: #929292;
	}

	.main image {
		border-radius: 20rpx;
		display: inline-block;
		margin-top: 20rpx;
		width: 100%;
	}
	/deep/.u-swiper,
	/deep/.u-swiper__wrapper,
	/deep/.u-swiper__wrapper__item__wrapper__image {
		height: 400rpx !important;
	}
	/deep/.u-swiper__indicator {
		right: 40rpx;
	}
</style>
